<template>
  <div class="task-list">
    <div class="task-list-header">
      <h2>任务列表</h2>
      <div class="task-list-actions">
        <button @click="showTaskForm">新建任务</button>
        <button @click="exportTasks">导出</button>
        <button @click="importTasks">导入</button>
      </div>
    </div>
    <div v-if="hasTasks" class="task-items">
      <TaskItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @edit="editTask"
        @delete="deleteTask"
      />
    </div>
    <EmptyState v-else />
    <TaskForm
      v-if="showForm"
      :task="editingTask"
      @save="saveTask"
      @cancel="cancelEdit"
    />
    <ConfirmDialog
      v-if="showConfirmDialog"
      :message="confirmMessage"
      @confirm="confirmDelete"
      @cancel="cancelDelete"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useTaskStore } from '../stores/taskStore';
import type { Task } from '../types/task';
import TaskItem from './TaskItem.vue';
import TaskForm from './TaskForm.vue';
import EmptyState from './EmptyState.vue';
import ConfirmDialog from './ConfirmDialog.vue';
import { exportToFile, importFromFile } from '../utils/fileUtils';

const taskStore = useTaskStore();
const showForm = ref(false);
const editingTask = ref<Task | null>(null);
const showConfirmDialog = ref(false);
const confirmMessage = ref('');
const taskToDelete = ref<string | null>(null);

const tasks = computed(() => taskStore.tasks);
const hasTasks = computed(() => taskStore.hasTasks);

const showTaskForm = () => {
  editingTask.value = null;
  showForm.value = true;
};

const editTask = (task: Task) => {
  editingTask.value = task;
  showForm.value = true;
};

const saveTask = async (task: Task) => {
  if (editingTask.value) {
    await taskStore.updateTask(task.id, task);
  } else {
    await taskStore.addTask(task);
  }
  showForm.value = false;
};

const cancelEdit = () => {
  showForm.value = false;
};

const deleteTask = (taskId: string) => {
  taskToDelete.value = taskId;
  confirmMessage.value = '确定要删除这个任务吗？';
  showConfirmDialog.value = true;
};

const confirmDelete = async () => {
  if (taskToDelete.value) {
    await taskStore.deleteTask(taskToDelete.value);
  }
  showConfirmDialog.value = false;
};

const cancelDelete = () => {
  showConfirmDialog.value = false;
};

const exportTasks = () => {
  const data = taskStore.exportTasks();
  exportToFile(data);
};

const importTasks = async () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.json';
  input.onchange = async (event) => {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      try {
        const data = await importFromFile(file);
        await taskStore.importTasks(data);
      } catch (error) {
        console.error('Failed to import tasks:', error);
        // 显示错误消息给用户
      }
    }
  };
  input.click();
};
</script>

<style scoped lang="less">
.task-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  &-actions {
    display: flex;
    gap: 10px;
  }

  .task-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>